

class Cart{
    constructor(){
        this.index=$(".header").children(".index");
        this.oback= $(".back");
        this.bigclass=$(".bigclass");
        this.fullcont=$(".fullcont");
        this.bigcont=$(".bigcont");
        this.biglist= $(".biglist");
        this.cart= $(".icon-gwc");
        this.listContent=$(".list_content");
        this.back();
        this.classify();
        this.list();
        this.fix();
        this.ifLogin();
        this.addEvent();
        
    }
    addEvent(){
       this.cart.on("click",function(){
            location.href="cart.html";
        });
        this.index.on("click",function(){
            location.href="../index.html";
        })


    }
    getData(){
        this.data=localStorage.getItem("goods")?JSON.parse(localStorage.getItem("goods")):[];
        console.log(this.data);
        this.display();
    }
    display(){
        var str="";
        this.data.forEach((val,index)=>{
            str+=`
            <ul index="${val.id}">
                <li class="select">
                    <span>
                        <i class="iconfont icon-xz"></i>
                    </span>
                </li>
                <li class="info">
                    <img src="${val.msg.indexImg}" alt="">
                    <i>${val.msg.title}</i>
                </li>
                <li class="price">￥${val.msg.price}</li>
                <li class="num">
                    <div class="click_num">
                        <div class="down btn">-</div>
                        <input type="text" name="" class="text" value=${val.num}>
                        <div class="up btn">+</div>
                    </div>
                </li>

                <li class="allprice">￥${val.num*val.msg.price}</li>
                <li class="close">
                    <span>x</span>
                    
                </li>
        </ul>
            `;
        
        });
        this.listContent.html(str);
        this.getBtn();
        
    }
    getBtn(){
        this.up=$(".up");
        this.down=$(".down");
        this.text=$(".text");
        this.delete=$(".close").children("span");
        this.allprice=$(".allprice");
        this.all=$(".all");
        this.singleSelect=$(".select");
        this.flag=false;
        this.allflag=false;
        this.init();
        this.updateData();
    }
    init(){
        for(var i=0;i<this.listContent.children().length;i++)
            if(this.text.eq(i).val()==1){
                this.text.eq(i).siblings(".down").css("color","#d6d6d6");
            }else{
                this.text.eq(i).siblings(".down").css("color","#8c5d3d");
            }
    }
    updateData(){
        var that=this;
        for(let i=0;i<this.listContent.children().length;i++){
            this.up.eq(i).on("click",function(){
                var value=$(this).siblings(".text").val();
                var price=$(this).parent().parent().siblings(".price").html().split("￥")[1];
                var id=$(this).parent().parent().parent().attr("index");
                $(this).siblings(".text").val(++value);
                $(this).siblings(".down").css("color","#8c5d3d");
                $(this).parent().parent().siblings(".allprice").html("￥"+(price*value));
                that.changeStorage(id, $(this).siblings(".text").val());
                that.calNum();
                return false;
                
            });
            this.down.eq(i).on("click",function(){
                var value=$(this).siblings(".text").val();
                var price=$(this).parent().parent().siblings(".price").html().split("￥")[1];
                var id=$(this).parent().parent().parent().attr("index");
                if(value==1){
                    $(this).siblings(".text").val(1);
                }else{
                    $(this).siblings(".text").val(--value);
                    if(value==1){
                        $(this).css("color","#d6d6d6");
                    }
                }
                $(this).parent().parent().siblings(".allprice").html("￥"+(price*value));
                that.changeStorage(id, $(this).siblings(".text").val());
                that.calNum();
                return false;
                 
            })
            this.text.eq(i).on("input",function(){
                var id=$(this).parent().parent().parent().attr("index");
                that.changeStorage(id, $(this).val());
                var value=$(this).val();
                var price=$(this).parent().parent().siblings(".price").html().split("￥")[1];
                $(this).parent().parent().siblings(".allprice").html("￥"+(price*value));
                that.calNum();

            })
            this.delete.eq(i).on("click",function(){
                var id=$(this).parent().parent().attr("index");
                $(this).parent().parent().remove();
                that.data.splice(i,1);
                localStorage.setItem("goods",JSON.stringify(that.data)); 
                that.calNum();

              
            })
            this.singleSelect.eq(i).on("click",function(){
                 
                if(!$(this).find("span").attr("selected")){
                    $(this).find("span").css({
                        background:"#EB3B35",
                        border:"1px solid #EB3B35"
                    }).attr("selected","selected");
                }else{
                    that.all.find("span").css({
                        background:"#fff",
                        border:"1px solid #999"
                    }).removeAttr("selected");

                    $(this).find("span").css({
                        background:"#fff",
                        border:"1px solid #999"
                    }).removeAttr("selected");

                }
                that.calNum();
                that.ifSelected();
            })
        }

        for(let i=0;i<this.all.length;i++){
            this.all.eq(i).on("click",function(){
                if(!$(this).find("span").attr("selected")){
                    that.all.find("span").css({
                        background:"#EB3B35",
                        border:"1px solid #EB3B35"
                    }).attr("selected","selected");

                    that.singleSelect.find("span").css({
                        background:"#EB3B35",
                        border:"1px solid #EB3B35"
                    }).attr("selected","selected");
                }else{
                    that.all.find("span").css({
                        background:"#fff",
                        border:"1px solid #999"
                    }).removeAttr("selected");

                    that.singleSelect.find("span").css({
                        background:"#fff",
                        border:"1px solid #999"
                    }).removeAttr("selected");
                }
                that.calNum();
            })
        }
        
      

        
    }
    calNum(){
        var num=0;
        var allP=0;
        for(var i=0;i<this.data.length;i++){
            if(this.singleSelect.eq(i).find("span").attr("selected")){
                
                num+=parseInt(this.text.eq(i).val());
                allP+=parseInt(this.allprice.eq(i).html().split("￥")[1]);
            }
            else{

            }
        }
        
        $(".selected").find("span").html(num);
        $(".total").find("span").html(allP.toFixed(2));
     
    }
    ifSelected(){
        for(var i=0;i<this.singleSelect.length;i++){
            if(this.singleSelect.eq(i).find("span").attr("selected")){
                
            }else{
                break; 
            }
        }
        if(i==this.singleSelect.length){
             
            this.all.find("span").css({
                background:"#EB3B35",
                border:"1px solid #EB3B35"
            }).attr("selected","selected");
        }
    }
      
    changeStorage(id,val){
        for(var i=0;i<this.data.length;i++){
            if(id==this.data[i].id){
                 this.data[i].num=val;
                 localStorage.setItem("goods",JSON.stringify(this.data));
            }
        }

        
    }
    ifLogin(){
        this.user=sessionStorage.getItem("user")? JSON.parse(sessionStorage.getItem("user")):{};
        if(this.user.user){
            this.getData();
        }
    }

    back(){
        this.oback.on("click",function(){
            var top=document.documentElement.scrollTop;
            $("html").animate({
                scrollTop:0
            })
        })
    }
    classify(){
        var that=this;
        this.bigclass.hover(function(){
            that.fullcont.css({
                display:"block"
            }).children(".bigcont").css("display","block")
        },function(){
            that.fullcont.css({
                display:"none"
            }).children(".bigcont").css("display","none");
        })
    
        this.bigcont.hover(function(){
            $(this).css("display","block");
        },function(){
            $(this).css("display","none");
        })
    
    
    }

    list(){
        for(let i=0;i<$(".lb").length;i++){
           $(".lb").eq(i).hover(()=>{
              this.biglist.css("display","block").children(".list_con"+i).css("display","block").siblings().css("display","none");
           })
        }
   
   }
    fix(){
        var that=this;
    document.onscroll=function(){
        if(document.documentElement.scrollTop>=470){
            $(".xd").css({
                display:"block",
                position:"fixed",
                top:"0",
                
            });
        } 
        else{
            $(".xd").css({
                display:"none"
            });
        }
    }
   }
}


class User{
    constructor(){
        this.session=sessionStorage.getItem("user")?JSON.parse(sessionStorage.getItem("user")):{};
        this.li=$("#list").children("li").eq(0);
        this.login=$("#login");
        this.register=$("#register");
        this.welcome=$("#welcome");
        this.init();
        this.addEvent();
    }
    init(){
        if(this.session.user){
            this.welcome.html( `${this.session.user} <span class="iconfont icon-xjt"></span>`).css({
                display:"inline",
                borderRight:"1px solid #666"
            }).siblings("a").css("display","none");
            
            this.li.hover(()=>{
                $(".second_list").css("display","flex");
            },()=>{
                $(".second_list").css("display","none");
            });
            $("#exit").on("click",()=>{
               sessionStorage.removeItem("user");
               this.welcome.html("").css({
                display:"none",
                borderRight:"0"
            }).siblings("a").css("display","inline");
            })
            var c=new Cart();
             
        }else{
            this.welcome.html("").css({
                display:"none",
                borderRight:"0"
            }).siblings("a").css("display","inline");
            location.href="login.html";
        }
    }
    addEvent(){
       this.login.on("click",function(){
            $(this).attr("href","login.html");
        })
        this.register.on("click",function(){
            $(this).attr("href","register.html");
        
        })
        
    }
}
new User();
